<template>
  <div>
    <top-label v-model="index">
      <span :slot="0">表面位移</span>
      <span :slot="1">浸润线</span>
      <span :slot="2">内部位移</span>
      <span :slot="3">干滩</span>
      <span :slot="4">库水位</span>
      <span :slot="5">降雨量</span>
      <!-- <span :slot="6">水质水量</span> -->
    </top-label>
    <el-col>
      <surface-displacement
        v-if="index === 0 && dataSource"
        :tailingPondId="tailingPondId"
      ></surface-displacement>
      <phreatic-line
        v-if="index === 1 && dataSource"
        :tailingPondId="tailingPondId"
      ></phreatic-line>
      <internal-displacement
        v-if="index === 2 && dataSource"
        :tailingPondId="tailingPondId"
      ></internal-displacement>
      <dry-beach-length
        v-if="index === 3 && dataSource"
        :tailingPondId="tailingPondId"
      ></dry-beach-length>
      <reservoir-water-level
        v-if="index === 4 && dataSource"
        :tailingPondId="tailingPondId"
      ></reservoir-water-level>
      <precipitation
        v-if="index === 5 && dataSource"
        :tailingPondId="tailingPondId"
      ></precipitation>
      <!-- <WaterQualityAndQuantity
        v-if="index === 6 && dataSource" :tailingPondId="tailingPondId"
      ></WaterQualityAndQuantity> -->
    </el-col>
  </div>
</template>

<script>
import TopLabel from "~/components/TopLabel";
import SurfaceDisplacement from "~/views/warning-management/data-warning-log/SurfaceDisplacement";
import PhreaticLine from "~/views/warning-management/data-warning-log/PhreaticLine";
import InternalDisplacement from "~/views/warning-management/data-warning-log/InternalDisplacement";
import DryBeachLength from "~/views/warning-management/data-warning-log/DryBeachLength";
import ReservoirWaterLevel from "~/views/warning-management/data-warning-log/ReservoirWaterLevel";
import Precipitation from "~/views/warning-management/data-warning-log/Precipitation";

export default {
  name: "DataWarningLog",
  components: {
    Precipitation,
    ReservoirWaterLevel,
    DryBeachLength,
    InternalDisplacement,
    PhreaticLine,
    TopLabel, SurfaceDisplacement
  },
   props: {
    tailingPondIds: Number,
    require: true
  },
  data () {
    return {
      index: 0,
      tailingPondId: null,
      dataSource: false
    }
  },
  mounted () {
  },
  watch: {
    tailingPondIds: {
      handler (newName, oldName) {
        this.tailingPondId = this.tailingPondIds
        if (this.tailingPondId !== null) this.dataSource = true
        this.$forceUpdate()
      },
      deep: true,
      immediate: true

    }
  }
}
</script>

<style scoped>
</style>
